import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component {

    onSearch = async () => {
        // 获取用户的输入(连续解构赋值+重命名)
        const { keywordElement: { value: keyword } } = this
        // 发送请求前通知App更新状态
        PubSub.publish('hjw', { isFirst: false, isLoading: true })
        // 发送网络请求---使用axios发送
        // #region // axios.get(`/api1/search/users2?q=${keyword}`).then(
        //     response => {
        //         // 请求成功后通知App更新状态
        //         PubSub.publish('hjw', { isLoading: false, users: response.data.items })
        //     },
        //     error => {
        //         // 请求失败后通知App更新状态
        //         PubSub.publish('hjw', { isLoading: false, err: error.message })
        //     }
        // )
        // #endregion

        // #region 发送网络请求---使用fetch发送（未优化）
        // fetch(`/api1/search/users2?q=${keyword}`).then(
        //     response => {
        //         console.log('联系服务器成功了');
        //         return response.json()
        //     },
        //     error => {
        //         console.log('联系服务器失败了');
        //         return new Promise(() => { })
        //     }
        // ).then(
        //     response => {
        //         console.log('获取数据成功了', response);
        //     },
        //     error => {
        //         console.log('获取数据失败了', error);
        //     }
        // )
        //#endregion

        // 发送网络请求---使用fetch发送（优化）
        try {
            const response = await fetch(`/api1/search/users2?q=${keyword}`)
            const data = await response.json()
            PubSub.publish('hjw', { isLoading: false, users: data.items })
        } catch (error) {
            console.log('请求出错', error);
            PubSub.publish('hjw', { isLoading: false, err: error.message })
        }
    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索github用户</h3>
                <div>
                    <input ref={c => { this.keywordElement = c }} type="text" placeholder="输入关键词点击搜索" />&nbsp;
                    <button onClick={this.onSearch}>搜索</button>
                </div>
            </section>
        )
    }
}
